<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部导航模块 -->
        <PageTools :show-before="true">
          <template #before>
            <el-button v-if="checkPermBt('arceAdd')" type="primary" @click="addFn">
              添加房产
            </el-button>
          </template>
          <template #after>
            <el-select v-model="category_contains">
              <el-option label="全部分类" :value="category_contains?'':category_contains" />
              <el-option v-for="item in categoriesList" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
            <el-select v-model="agent_contains">
              <el-option label="全部经纪" :value="agent_contains?'':agent_contains" />
              <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <el-input v-model="title_contains" placeholder="请输入关键字" />
            <el-button @click="searchFn">筛选</el-button>
          </template>
        </PageTools>
        <!-- 表格 -->
        <el-table border :data="propetyList">
          <el-table-column label="封面">
            <template v-slot="{row}">
              <!-- 还没做错误图片处理 -->
              <img
                v-imgErr="require('@/assets/404_images/404.png')"
                style="width: 120px"
                :src="row.image"
                class="img"
              >
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="tags" label="标签">
            <template v-slot="{row}">
              <el-tag v-for="tag in row.tags" v-show="row.tags.length!==0" :key="tag" type="success">{{ tag }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="category.title" label="分类" />
          <el-table-column prop="agent.name" label="经纪" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="desc" label="介绍">
            <template v-slot="{row}">
              <div v-html="row.desc" />
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template v-slot="{row}">
              <!-- 还没做错误图片处理 -->
              <img
                v-imgErr="require('@/assets/404_images/404.png')"
                style="width: 120px"
                :src="row.photos"
                class="img"
              >
            </template></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button v-if="checkPermBt('arceEdit')" type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button v-if="checkPermBt('arceDel')" type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="2"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <showDialog
        ref="showDialog"
        :show-dialog.sync="showDialog"
        :agents-list="agentsList"
        :categories-list="categoriesList"
        @updateEvent="getPropetyLists"
      />
    </div>
  </div>
</template>

<script>
import { getPropetyList, getPropety, deletePropety } from '@/api/propety'
import { getList, getQuantity } from '@/api/categoties'
import { getAgentsListTotal, getAgentsList } from '@/api/agents'
import showDialog from './components/showDialog.vue'
export default {
  components: {
    showDialog
  },
  data() {
    return {
      propetyList: [],
      params: {
        _limit: 2, // 每页的获取条数
        _start: 0 // 开始获取的位置
        // title_contains: ''
      },
      agentsParams: {
        _limit: 2, // 经纪每页的获取条数
        _start: 0, // 开始获取的位置
        name_contains: ''
      },
      total: 2, // 总数
      catetotal: 2, // 分类总数
      showDialog: false,
      tableData: [],
      categoriesList: [], // 分类数组
      agentsList: [], // 经纪数组
      title_contains: '', // 搜索内容
      agent_contains: '', // 经纪下拉框内容
      category_contains: '' // 分类

    }
  },
  created() {
    this.getPropetyLists()
    this.getCategories()
    this.getAgent()
  },
  methods: {

    // 搜索事件
    async searchFn() {
      if (this.agent_contains) {
        this.params.agent_contains = this.agent_contains
      } else {
        this.params.agent_contains = undefined
      }
      if (this.category_contains) {
        this.params.category_contains = this.category_contains
      } else {
        this.params.category_contains = undefined
      }
      if (this.title_contains) {
        this.params.title_contains = this.title_contains
      } else {
        this.params.title_contains = undefined
      }
      this.getPropetyLists()
    },
    // 点击删除
    delFn(id) {
      this.$confirm('您请确定删除这条房产吗', '提示', {
        type: 'warning'
      }).then(async() => {
        if (this.propetyList.length === 1) {
          this.params._start -= 2
        }
        await deletePropety(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getPropetyLists()
      }).catch(() => {
        console.log('取消')
      })

      this.getPropetyLists()
    },
    // 点击编辑
    editFn(id) {
      this.showDialog = true
      this.$refs.showDialog.getPropetyId(id)
    },
    // 点击添加按钮
    addFn() {
      this.showDialog = true
    },
    // 分页器改变
    currentChange(page) {
      this.params._start = (page - 1) * 2

      this.getPropetyLists()
    },
    // 获取经纪
    async  getAgent() {
      const res = await getAgentsListTotal('')
      // console.log('经纪', res)
      this.agentsParams._limit = res.data
      const val = await getAgentsList(this.agentsParams)
      // console.log('经纪', val)
      this.agentsList = val.data
    },
    // 获取分类
    async getCategories() {
      const quantity = await getQuantity(this.params)
      this.catetotal = quantity.data
      const res = await getList({
        _limit: this.catetotal,
        _start: this.params._start,
        title_contains: this.params.title_contains
      })
      // console.log('分类', res)
      this.categoriesList = res.data
    },
    // 获取房产数组列表
    async getPropetyLists() {
      const data = await getPropetyList(this.params)
      console.log(120, data)
      this.propetyList = data.data
      const res = await getPropety(this.params)
      // console.log(116, res)
      this.total = res.data // 总数
    }
  }
}
</script>

<style lang = 'scss' scoped>
  .el-input{
    width: 300px;
  }
  .img {
  width: 200px;
  height: 200px;
}
</style>
